<template>
  <div>
    <div class="header">
      <span style="margin-left: 20px">关键字</span>
      <el-input
        placeholder="请输入关键字"
        v-model="empReq.keyword"
        style="width: 200px; margin-left: 10px"
        clearable
      ></el-input>
      <el-button
        type="primary"
        style="margin-left: 20px"
        size="small"
        @click="
          empReq.pageIndex = 1
          getEmployeeRegistes()
        "
      >
        关键字搜索
      </el-button>
    </div>
    <el-tabs type="border-card" @tab-click="tabClick" style="height: 95%">
      <el-tab-pane
        style="height: 90%"
        :label="sts.Description"
        v-for="sts in stses"
        :key="sts.EnumValue"
      >
        <el-table
          style="overflow: auto"
          :data="empRes.Items"
          stripe
          border
          highlight-current-row
        >
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="公司" width="180">
            <template slot-scope="scope">
              {{ scope.row.EPR_CompanyName }}
            </template>
          </el-table-column>
          <el-table-column label="税号" width="180">
            <template slot-scope="scope">
              {{ scope.row.EPR_CompanyTaxNo }}
            </template>
          </el-table-column>
          <el-table-column label="姓名" width="100">
            <template slot-scope="scope">
              {{ scope.row.EPR_UserName }}
            </template>
          </el-table-column>
          <el-table-column label="联系号码" width="120">
            <template slot-scope="scope">
              {{ scope.row.EPR_UserPhone }}
            </template>
          </el-table-column>
          <el-table-column label="申请时间">
            <template slot-scope="scope">
              {{ scope.row.EPR_ApplyTime | formatTime }}
            </template>
          </el-table-column>
          <el-table-column label="备注">
            <template slot-scope="scope">
              {{ scope.row.EPR_Remark }}
            </template>
          </el-table-column>
          <el-table-column label="审核时间" v-if="sts.EnumValue != 0">
            <template slot-scope="scope">
              {{ scope.row.EPR_CheckTime | formatTime }}
            </template>
          </el-table-column>
          <el-table-column label="拒绝原因" v-if="sts.EnumValue == -100">
            <template slot-scope="scope">
              {{ scope.row.EPR_RefuseReason }}
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" v-if="sts.EnumValue == 0">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                icon="el-icon-check"
                @click="pass(scope.row.EPR_ID)"
              >
                通过
              </el-button>
              <el-button
                type="text"
                size="small"
                icon="el-icon-close"
                @click="refuse(scope.row.EPR_ID)"
              >
                拒绝
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="width: 100%; height: 40px">
          <el-pagination
            layout="total,prev,pager,next,sizes"
            style="float: right"
            background
            :current-page.sync="empReq.pageIndex"
            :total="empRes.Total"
            :page-size="empReq.pageSize"
            :page-sizes="[10, 15, 20]"
            @size-change="
              (val) => {
                empReq.pageSize = val
                getEmployeeRegistes()
              }
            "
            @current-change="getEmployeeRegistes()"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-drawer title="添加用户" :visible.sync="addEmployeeVis" direction="rtl">
      <el-form
        label-width="100px"
        style="margin-top: 20px; width: 80%"
        v-if="newEmployee"
      >
        <el-form-item label="姓名">
          <el-input v-model="newEmployee.USR_Name"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select
            filterable
            v-model="newEmployee.USR_Sex"
            style="width: 100%"
          >
            <el-option
              v-for="item in sexes"
              :key="item.val"
              :label="item.label"
              :value="item.val"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="newEmployee.USR_Phone"></el-input>
        </el-form-item>
        <el-form-item label="联系地址">
          <el-input v-model="newEmployee.USR_Address"></el-input>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="newEmployee.USR_IDCard"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="newEmployee.USR_Email"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="newEmployee.EMP_Remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="addEmployee()">提交</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script>
import {
  getRegistStatuses,
  getEmployeeRegistes,
  pass,
  refuse,
} from '@/api/flowCenter/platform/employeeRegist'
export default {
  data: function () {
    return {
      keyword: '',
      sexes: [
        { val: 1, label: '男' },
        { val: 0, label: '女' },
      ],
      curSts: null,
      stses: [],
      emps: [],
      empReq: {
        sts: 0,
        pageIndex: 1,
        pageSize: 10,
        keyword: null,
      },
      empRes: {
        Items: [],
        Total: 0,
      },
      newEmployee: {},
      addEmployeeVis: false,
    }
  },
  methods: {
    tabClick(val) {
      this.curSts = this.stses.find((x) => x.Description == val.label)
      this.getEmployeeRegistes()
    },
    getEmployeeRegistes() {
      this.empReq.sts = this.curSts.EnumValue
      getEmployeeRegistes(this.empReq).then(({ data }) => (this.empRes = data))
    },
    getRegistStatuses() {
      getRegistStatuses().then(({ data }) => {
        this.stses = data
        this.curSts = this.stses.find((x) => x.EnumValue == 0)
        this.getEmployeeRegistes()
      })
    },
    pass(id) {
      this.$confirm(`审核通过？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        pass(id).then(() => {
          this.getEmployeeRegistes()
        })
      })
    },
    refuse(id) {
      this.$prompt('请输入拒绝原因', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      })
        .then(({ value }) => {
          refuse(id, value).then(() => {
            this.getEmployeeRegistes()
          })
        })
        .catch(() => {})
    },
  },
  created: function () {
    var data = this.$store.getters['pagination/getRoutePage'](this.$route)
    Object.assign(this.$data, data)
    this.getRegistStatuses()
  },
  beforeRouteLeave(to, from, next) {
    this.$store.dispatch('pagination/setRoutePage', {
      route: this.$route,
      pageData: this.$data,
    })
    next()
  },
}
</script>
<style>
.el-drawer.rtl {
  overflow: scroll;
}
</style>
<style scoped>
.header {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  height: auto;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  background: #ffffff;
  border-radius: 5px;
  border-bottom: #f4f8ff 2px solid;
  display: flex;
  margin-bottom: 11px;
  align-items: center;
}
</style>
